GRPH 325: Interaction Design

Triad Website Project

Students will be designing a website based on a Triad Combination (3 topics within a theme). The website will feature a gallery of images for each of the topics, as well as a descriptive paragraph for each topic. Project Instructions

File Prep

Design completed in Figma®, based off the provded template.

"Website Files" folder is created.

Resource Files are downloaded into the "Website Files" folder.

Header image is formatted and saved in the "images" folder.

Thumbnail Gallery images are formatted and saved in the "thumbs" inside the "images" folder.

Large Gallery images are formatted and saved in the "large" inside the "images" folder.

Home Page (HTML)

Created index.html file

Added Text to the <body>

Added Images to the <body>

Created Style Sheets (CSS)

Created main_styles.css file

Created desktop_styles.css file

Created tablet_styles.css file

Created mobile_styles.css file

Linked all CSS files to the index.html file

Select Google Font and apply the code to the CSS file and html page.

Gallery Pages

Created Gallery Page #1

Javascript (Lightbox) added to Gallery Page #1

Gallery Page #2 Created (based off of Gallery #1 page)

Gallery Page #3 Created (based off of Gallery #1 page)

Search Engines

Title and Description updated on Home Page

Title and Description updated on Gallery Page #1

Title and Description updated on Gallery Page #2

Title and Description updated on Gallery Page #3